<template>
	<view class="container">
		<!-- 顶部栏 -->
		<view class="header">
			<image class="back-icon" src="/static/back.png" />
			<text class="header-title">输入核销码</text>
			<view class="header-actions">
				<image class="icon" src="/static/more.png" />
			</view>
		</view>
		<!-- 输入核销码 -->
		<view class="input-row">
			<input class="code-input" v-model="inputCode" placeholder="输入核销码：MC—1234–5678–9012" />
			<button class="recognize-btn" @click="onRecognize">识别</button>
		</view>
		<!-- 内容卡片和按钮区 -->
		<view v-if="showOrder" class="card">
			<view class="code-row">
				<text class="code-label">核销码</text>
				<text class="code-value">MC—1234–5678–9012</text>
			</view>
			<view class="section">
				<view class="section-title">服务内容</view>
				<view class="section-content">
					XXX标准洗车服务包含<br />
					整车泡沫洗烘擦干<br />
					轮胎轮毂冲洗清洁<br />
					车内吸尘<br />
					内饰脚垫简单除尘<br />
					<text class="section-tip">（不包含车P、水泥、沥青和顽固污渍清理等）</text>
				</view>
			</view>
			<view class="section">
				<view class="section-title">订单信息</view>
				<view class="section-content">
					订单价格：￥30.00<br />
					实付款：<text class="price">￥25.00</text><br />
					优惠金额：￥5.00<br />
					订单编号：2020032554565799<br />
					支付时间：2020.03.30 14:40:45<br />
					预约时间：2020.03.30 14:40
				</view>
			</view>
		</view>
		<view v-if="showOrder && status === 'init'" class="btn-row">
			<button class="main-btn" @click="showDialog = true">确认核销</button>
		</view>
		<view v-if="showOrder && status === 'done'" class="btn-row">
			<button class="main-btn done" disabled>已核销</button>
		</view>
		<!-- 弹框 -->
		<view v-if="showDialog" class="dialog-mask">
			<view class="dialog-box">
				<view class="dialog-title">核销此订单</view>
				<view class="dialog-content">请您仔细核对订单，核销后不可撤销，请谨慎操作！</view>
				<view class="dialog-actions">
					<button class="dialog-cancel" @click="showDialog = false">取消</button>
					<button class="dialog-confirm" @click="confirmXiaohe">核销</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const inputCode = ref('');
const showOrder = ref(false);
const status = ref('init'); // init, done
const showDialog = ref(false);
const onRecognize = () => {
	// 这里可加校验，模拟识别成功
	if (inputCode.value.trim()) {
		showOrder.value = true;
		status.value = 'init';
	}
};
const confirmXiaohe = () => {
	showDialog.value = false;
	status.value = 'done';
};
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #f7f7f7;
}
.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 24rpx 0 24rpx;
	background: #fff;
}
.back-icon {
	width: 40rpx;
	height: 40rpx;
}
.header-title {
	font-size: 32rpx;
	color: #222;
	font-weight: bold;
}
.header-actions {
	display: flex;
	align-items: center;
}
.icon {
	width: 36rpx;
	height: 36rpx;
	margin-left: 16rpx;
}
.input-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 32rpx 24rpx 0 24rpx;
}
.code-input {
	flex: 1;
	height: 64rpx;
	border: 1px solid #dbeafe;
	border-radius: 8rpx;
	background: #fff;
	font-size: 28rpx;
	padding: 0 20rpx;
	margin-right: 16rpx;
}
.recognize-btn {
	width: 120rpx;
	height: 64rpx;
	background: #238aff;
	color: #fff;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-weight: bold;
}
.card {
	background: #fff;
	border-radius: 20rpx;
	margin: 32rpx 24rpx 0 24rpx;
	padding: 32rpx 24rpx;
	box-shadow: 0 4rpx 16rpx #e6e6e6;
}
.code-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 24rpx;
}
.code-label {
	font-size: 28rpx;
	color: #222;
	font-weight: bold;
	margin-right: 16rpx;
}
.code-value {
	font-size: 30rpx;
	color: #222;
	font-weight: bold;
	letter-spacing: 2rpx;
}
.section {
	margin-bottom: 24rpx;
}
.section-title {
	font-size: 26rpx;
	color: #666;
	font-weight: bold;
	margin-bottom: 8rpx;
}
.section-content {
	font-size: 26rpx;
	color: #333;
	line-height: 1.7;
}
.section-tip {
	color: #888;
	font-size: 24rpx;
	display: block;
	margin-top: 8rpx;
}
.price {
	color: #238aff;
	font-weight: bold;
}
.btn-row {
	margin: 40rpx 24rpx 0 24rpx;
}
.main-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, #3a8dff 0%, #166dff 100%);
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
}
.main-btn.done {
	background: #ccc;
	color: #fff;
}
.dialog-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.dialog-box {
	background: #fff;
	border-radius: 20rpx;
	width: 540rpx;
	padding: 40rpx 32rpx 32rpx 32rpx;
	box-shadow: 0 8rpx 32rpx #e6e6e6;
	text-align: center;
}
.dialog-title {
	font-size: 30rpx;
	color: #222;
	font-weight: bold;
	margin-bottom: 16rpx;
}
.dialog-content {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 32rpx;
}
.dialog-actions {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.dialog-cancel {
	flex: 1;
	background: #f2f2f2;
	color: #238aff;
	border-radius: 44rpx;
	font-size: 30rpx;
	margin-right: 16rpx;
}
.dialog-confirm {
	flex: 1;
	background: #238aff;
	color: #fff;
	border-radius: 44rpx;
	font-size: 30rpx;
}
</style>
